<template>
  <div class="Login" id="login">
    <div class="LoginBox">
      <div class="box1"></div>
      <div class="box2">
        <h2 style="margin-left: 180px">管理员登录界面</h2>
        <el-form
          :model="LoginForm"
          :rules="rules"
          ref="LoginForm"
          label-width="100px"
          class="demo-ruleForm"
          @keyup.enter.native="submitForm('LoginForm')"
        >
          <el-form-item label="用户名:" prop="admin">
            <el-input v-model="LoginForm.admin"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="LoginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="验证码:" prop="verifyCode">
            <el-input v-model="LoginForm.verifyCode"></el-input>
          </el-form-item>
          <el-form-item label="" prop="">
            <div id="v_container"></div>
          </el-form-item>
          <el-form-item label="" prop="" style="text-align: center">
            <el-button type="success" @click="submitForm('LoginForm')"
              >登录</el-button
            >
            <el-button type="warning" @click="resetForm('LoginForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//引用axios,发ajax请求
import axios from "axios";
//引入验证码校验文件
import { GVerify } from "../assets/js/verifyCode";
export default {
  name: "Login",
  data() {
    return {
      //登录表单数据
      LoginForm: {
        admin: "",
        password: "",
        verifyCode: "",
      },

      //表单验证规则
      rules: {
        //用户名验证
        admin: [
          { required: true, message: "输入不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        //密码验证
        password: [
          { required: true, message: "输入不能为空", trigger: "blur" },
        ],
        //验证码验证
        verifyCode: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入验证码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //登录按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 登录获取验证码
          const that = this;
          var verifyCode = this.LoginForm.verifyCode;
          var verifyFlag = this.verifyCode.validate(verifyCode);
          if (!verifyFlag) {
            that.$notify.error({
              title: "系统提示",
              message: "验证码输入错误",
            });
            return;
          } else {
            that.$notify({
              title: "系统提示",
              message: "验证码输入正确",
              type: "success",
            });
          }
          //使用promise发起请求,用于登录
          const { admin, password } = this.LoginForm;
          const p = new Promise((resolve, reject) => {
            axios
              .get(
                `http://localhost:3000/admin/adminLogin?admin=${admin}&password=${password}`
              )
              .then(
                (value) => resolve(value),
                (reason) => reject(reason)
              );
          });
          p.then(
            (value) => {
              // console.log(value)
              //信息判断
              //解结构赋值
              const { isRight, msg, adminToken } = value.data;
              if (isRight) {
                //用户名和密码都正确，跳转到主页,并设置token
                this.$cookie.set("adminToken", adminToken, 1);
                this.$cookie.set("admin", admin, 1);
                this.$router.replace({
                  name: "adminHome",
                  query: {
                    admin: admin,
                  },
                });
                return;
              } else if (msg === "用户不存在") {
                alert("用户名不存在！！！");
                this.LoginForm.verifyCode = "";
                this.LoginForm.admin = "";
                this.LoginForm.password = "";
                return;
              } else {
                alert("密码错误！！！");
                this.LoginForm.verifyCode = "";
                this.LoginForm.admin = "";
                this.LoginForm.password = "";
                return;
              }
            },
            (reason) => {
              throw reason;
            }
          );
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
  },
  mounted() {
    //对验证码进行校验
    this.verifyCode = new GVerify("v_container");
  },
};
</script>

<style scoped lang='less'>
.Login {
  width: 100%;
  height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;

  .LoginBox {
    width: 1100px;
    min-height: 500px;
    // border: 1px solid rgb(194, 189, 189);
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    .box1 {
      width: 500px;
      // height: 100%;
      background: url("../assets/img/admin.jpg") no-repeat;
      background-size: cover;
    }
    .box2 {
      width: 500px;
      height: 100%;
    }
  }
}
// #login{
//     background: url('../assets/img/teaGarden.png') no-repeat;
//     background-size: cover;
// }
</style>